<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>23201013505-王子毓</title>
  <link rel="stylesheet" href="fonts/iconfont.css">
  <link rel="stylesheet" href="css/swiper.css">
  <link rel="stylesheet" href="css/index.css">
</head>

<body>

  <div class="index-wrap out">
    <div class="lb">
      <div class="lb-header">
        <div class="logo">
          <span class="iconfont icon-xiaomi"></span>
        </div>
        <div class="input">
          <span class="iconfont icon-search"></span>
          <input type="text">
          <span class="iconfont icon-scan"></span>
        </div>
        <span class="iconfont icon-qrcode"></span>
        <span class="iconfont icon-l-msg"></span>
      </div>

      <div class="lb-main">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="images/banner1.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="images/banner2.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="images/banner3.jpg" alt="">
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>

      <img src="images/i1.jpg" class="zp" alt="">
    </div>

    <div class="dh">
      <a href="#">
        <img src="images/i2.jpg" alt="">
        <p>小米上新</p>
      </a>
      <a href="#">
        <img src="images/i3.jpg" alt="">
        <p>小米众筹</p>
      </a>
      <a href="#">
        <img src="images/i4.jpg" alt="">
        <p>小米发布</p>
      </a>
      <a href="#">
        <img src="images/i5.jpg" alt="">
        <p>米金商城</p>
      </a>
      <a href="#">
        <img src="images/i6.jpg" alt="">
        <p>会员专享</p>
      </a>
      <a href="#">
        <img src="images/i7.jpg" alt="">
        <p>智能穿戴</p>
      </a>
      <a href="#">
        <img src="images/i8.jpg" alt="">
        <p>电脑/平板</p>
      </a>
      <a href="#">
        <img src="images/i9.jpg" alt="">
        <p>手机</p>
      </a>
      <a href="#">
        <img src="images/i10.jpg" alt="">
        <p>电视</p>
      </a>
      <a href="#">
        <img src="images/i11.jpg" alt="">
        <p>空冰洗</p>
      </a>

    </div>

    <div class="box">
      <div class="tit">
        <h2>沉浸观影    &nbsp;科技焕新</h2>
        <p>至高12期免息 ></p>
      </div>
      <img src="images/i12.jpg" class="bottom-img" alt="">

      <div class="right">
        <div class="right-con">
          <div class="text">
            <h4>手机尚新季 </h4>
            <p>至高优惠600元</p>
            <a href="#">进入会场 ></a>
          </div>
          <img src="images/i13.jpg" alt="">
        </div>
        <div class="right-con">
          <div class="text">
            <h4>温暖舒适家 </h4>
            <p>电暖气低至279元</p>
            <a href="#">进入会场 ></a>
          </div>
          <img src="images/i14.jpg" alt="">
        </div>
      </div>
    </div>
    <div class="hddb">
      <img src="images/fhdb.jpg" alt="">
    </div>
    <div class="rqsj-text"><p>人气手机</p> <span>更多  ></span></div>
    <div class="rqsj">
      
      <div class="rqsj-left">
        <span>新品</span>
        <img src="./images/k70.jpg" alt="">
      </div>
      <div class="rqsj-left">
        <span>新品</span>
        <img src="./images/xm14.jpg" alt="">
      </div>
      <div class="rqsj-bottom">
        <div class="rqsj-bottom-1">
          <img src="./images/rqsj1.jpg" alt="">
             <p>Note 13 Pro系列</p>
             <span>购机赠碎屏保   ></span>
        </div>
        <div class="rqsj-bottom-1">
          <img src="./images/rqsj2.jpg" alt="">
             <p>Note 12 Turbo</p>
             <span>赠小米有线耳机   ></span>
        </div>
        <div class="rqsj-bottom-1">
          <img src="./images/rqsj3.jpg" alt="">
             <p>Redmi K70E</p>
             <span>至高6期免息   ></span>
        </div>
      </div>
    </div>
  </div>

  <nav>
    <a href="index.html" class="choose">
      <span class="iconfont icon-home"></span>
      首页
    </a>
    <a href="menu.html">
      <span class="iconfont icon-menu"></span>
      分类
    </a>
    <a href="service.html">
      <span class="iconfont icon-heart"></span>
      服务
    </a>
    <a href="#">
      <span class="iconfont icon-cart"></span>
      购物车
    </a>
    <a href="user.html">
      <span class="iconfont icon-user"></span>
      我的
    </a>

  </nav>

</body>
<script src="js/swiper.js"></script>
<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    loop: true,
    autoplay: true,
    pagination: {
      el: ".swiper-pagination",
    },
  });
  var index_wrap=document.querySelector(".index-wrap");
  var lb=index_wrap.querySelector(".lb");
  var lb_header =lb.querySelector(".lb .lb-header");
  var hddb=index_wrap.querySelector(".hddb");
  console.log(lb_header.style);
  window.onscroll=()=>{
        var st=document.documentElement.scrollTop||document.body.scrollTop;
        console.log(st/10)
        
        if(st==0 ){
          lb_header.style.backgroundColor="rgb(255, 255, 255,0)";
          hddb.style.display="none"
            
        }else{
          lb_header.style.backgroundColor="rgb(255, 255, 255,"+st/10+")";
            hddb.style.display="block"
        }
        
       }
       hddb.onclick=()=>{
        document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
       }
</script>

</html>